import {
  Button,
  Col,
  Form,
  FormItem,
  Input,
  InputNumber,
  message,
  Modal,
  Row,
  Spin
} from 'ant-design-vue'
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import { omit } from 'xe-utils'

import { cardApi } from '@/apis'
import { WarningItem } from '@/apis/cardTypes'

import styles from './index.module.css'

export default defineComponent({
  name: 'RechargeWarm',
  setup() {
    const loading = ref(true)
    const showDialog = ref(false)
    const dialogLoading = ref(false)
    const warningData = ref([] as WarningItem[])

    const curOptionItem = ref({} as WarningItem)

    let intervalId

    onMounted(() => {
      getData()
      intervalId = setInterval(() => {
        getData()
      }, 15_000)
    })

    onUnmounted(() => {
      clearInterval(intervalId)
    })

    //获取详情
    async function getData() {
      try {
        warningData.value = await cardApi.getWarningList()
      } finally {
        loading.value = false
      }
    }

    //设置
    function handleSet(type) {
      curOptionItem.value = JSON.parse(JSON.stringify(warningData.value[type]))
      curOptionItem.value = omit(curOptionItem.value, ['warningCurrent'])
      showDialog.value = true
    }

    //确定
    async function dialogConfirm() {
      if (!curOptionItem.value.warningNum) {
        message.warn('请输入预警额度')
        return
      }
      if (
        !curOptionItem.value.warningPhone ||
        curOptionItem.value.warningPhone.toString().length != 11
      ) {
        message.warn('请输入通知手机')
        return
      }
      try {
        dialogLoading.value = true
        await cardApi.editWarning(curOptionItem.value)
        showDialog.value = false
        getData()
      } finally {
        dialogLoading.value = false
      }
    }

    return {
      handleSet,
      dialogConfirm,
      warningData,
      loading,
      showDialog,
      dialogLoading,
      curOptionItem
    }
  },
  render() {
    return (
      <div>
        <Spin spinning={this.loading}>
          <Form>
            <FormItem>
              <h2>预充值预警</h2>
            </FormItem>
            <Row
              type="flex"
              style={{
                marginTop: '10px',
                marginLeft: '30px',
                alignItems: 'center'
              }}
            >
              <Col span={4}>
                <div class={styles.limitWrap}>
                  <div class={styles.limitText}>
                    ￥ {this.warningData[0]?.warningCurrent}
                  </div>
                  <h3 style={{ marginTop: '10px' }}>海威在线点餐</h3>
                </div>
              </Col>
              <Col span={3}>
                <Button type="primary" onClick={() => this.handleSet(0)}>
                  设置预警
                </Button>
              </Col>

              <Col span={4}>
                <div class={styles.limitWrap}>
                  <div class={styles.limitText}>
                    ￥ {this.warningData[1]?.warningCurrent}
                  </div>
                  <h3 style={{ marginTop: '10px' }}>海威会员卡</h3>
                </div>
              </Col>
              <Col span={3}>
                <Button type="primary" onClick={() => this.handleSet(1)}>
                  设置预警
                </Button>
              </Col>
              <Col span={4}>
                <div class={styles.limitWrap}>
                  <div class={styles.limitText}>
                    ￥ {this.warningData[2]?.warningCurrent}
                  </div>
                  <h3 style={{ marginTop: '10px' }}>爱库存</h3>
                </div>
              </Col>
              <Col span={3}>
                <Button type="primary" onClick={() => this.handleSet(2)}>
                  设置预警
                </Button>
              </Col>
            </Row>
          </Form>

          <Modal
            v-model:visible={this.showDialog}
            width={600}
            confirmLoading={this.dialogLoading}
            title="设置预警"
            destroyOnClose
            onOk={this.dialogConfirm}
          >
            <Form labelCol={{ span: 4 }} style={{ marginTop: '15px' }}>
              <FormItem label={'预警额度'} required>
                <InputNumber
                  placeholder={'请输入'}
                  v-model:value={this.curOptionItem.warningNum}
                  style={{ width: '300px' }}
                  maxlength={8}
                />
              </FormItem>

              <FormItem label={'通知手机'} required>
                <InputNumber
                  placeholder={'请输入'}
                  v-model:value={this.curOptionItem.warningPhone}
                  style={{ width: '300px' }}
                  min={1}
                  step={0}
                  maxlength={11}
                />
              </FormItem>
              <FormItem label={'通知邮箱'}>
                <Input
                  placeholder={'请输入'}
                  v-model:value={this.curOptionItem.warningMail}
                  style={{ width: '300px' }}
                />
              </FormItem>
            </Form>
          </Modal>
        </Spin>
      </div>
    )
  }
})
